{/* Copyright 2024 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License. */}

import {BlogPostLayout, Hero} from '@react-spectrum/docs';
export default BlogPostLayout;

---

description: Happy fall! 🍁 We’re excited to announce that our color picker components are now generally available! We've also added a pending state for buttons in React Aria Components, advanced TreeView to beta, and added new Disclosure and DisclosureGroup components in alpha for building accordions and collapsible panels.

date: 2024-09-30
---

# September 30, 2024 Release
Happy fall! 🍁 We’re excited to announce that our color picker components are now generally available! This includes [ColorPicker](react-aria:ColorPicker), [ColorArea](react-aria:ColorArea), [ColorField](react-aria:ColorField), [ColorSlider](react-aria:ColorSlider), [ColorSwatch](react-aria:ColorSwatch), [ColorSwatchPicker](react-aria:ColorSwatchPicker), and [ColorWheel](react-aria:ColorWheel). These enable you to build fully customizable color pickers, including accessible color descriptions for screen reader support.

In addition, we’ve introduced a new [pending state](react-aria:Button#pending) for buttons in React Aria Components, allowing you to display a progress spinner to indicate that an action is in progress. It also handles screen reader announcements and disables other interactions, except for focus, during the pending state.

We're also advancing the React Aria Components [Tree](react-aria:Tree) and Spectrum [TreeView](../TreeView.html) to beta, and have added some basic documentation. In alpha, we have new [Disclosure](react-aria:Disclosure) and [DisclosureGroup](react-aria:DisclosureGroup) components in React Aria Components, which can be used to build accordions and other collapsible panels.

Huge thanks as always to everyone who contributed to this release! 😍

## Enhancements

- Button
  - Add pending state to Button in React Aria Components - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/7002), [PR](https://github.com/adobe/react-spectrum/pull/7073)
- Collections
  - Support fragments in React Spectrum v3 collections - [@solimant](https://github.com/solimant) - [PR](https://github.com/adobe/react-spectrum/pull/6430)
- Tabs
  - Support hover events in React Aria Component Tabs - [@lithdew](https://github.com/lithdew) - [PR](https://github.com/adobe/react-spectrum/pull/6742)
- TableView
  - Support `disabledBehavior` prop in TableView - [@ktabors](https://github.com/ktabors) - [PR](https://github.com/adobe/react-spectrum/pull/6832), [@LFDanLu](https://github.com/LFDanLu) - [PR](https://github.com/adobe/react-spectrum/pull/6863)
- Misc
  - Use content hashes in CSS modules - [@devongovett](https://github.com/devongovett) - [PR](https://github.com/adobe/react-spectrum/pull/7029)
  - TS Strict support in Stately List hooks - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/6567)
  - Add test utilities for ARIA patterns to simplify test writing - [@LFDanLu](https://github.com/LFDanLu) - [PR](https://github.com/adobe/react-spectrum/pull/6208)
  - Allow styles on VirtualizerItem - [@patrickkuhlmann](https://github.com/patrickkuhlmann) - [PR](https://github.com/adobe/react-spectrum/pull/6998)
  - Add support for windows contributors - [@davidcoleman007](https://github.com/davidcoleman007) - [PR](https://github.com/adobe/react-spectrum/pull/6313)
  - Allow passing data attributes to FieldError in RAC - [@omarnyte](https://github.com/omarnyte) - [PR](https://github.com/adobe/react-spectrum/pull/6895)
  - Support and document `preventFocusOnPress` - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/6854)

## Fixes

- ActionBar
  - Pass through ActionBar `disabledKeys` to ActionGroup - [@GrantRussell](https://github.com/GrantRussell) - [PR](https://github.com/adobe/react-spectrum/pull/7090)
- ComboBox
  - Keep focus on the input in ComboBox - [@chirokas](https://github.com/chirokas) - [PR](https://github.com/adobe/react-spectrum/pull/6783)
  - Fix `isQuiet` and `isReadOnly` styling - [@LFDanLu](https://github.com/LFDanLu) - [PR](https://github.com/adobe/react-spectrum/pull/6829)
- Date/Time
  - Fix type regression in Calendar - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/6790)
  - Add missing `endOfWeek` overload - [@cyyynthia](https://github.com/cyyynthia) - [PR](https://github.com/adobe/react-spectrum/pull/6749)
  - Fix `useDateSegment` null ref error - [@teemuandersen](https://github.com/teemuandersen) - [PR](https://github.com/adobe/react-spectrum/pull/6989)
- Menu
  - Fix `useMenuItem` `onAction` regression - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/6807)
- Picker
  - Update Picker placeholder to be shorter - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/6796)
- SearchField
  - Fix SearchField padding right specificity - [@LFDanLu](https://github.com/LFDanLu) - [PR](https://github.com/adobe/react-spectrum/pull/6829)
- Select
  - Fix Select from showing placeholder when selected value is 0 - [@unional](https://github.com/unional) - [PR](https://github.com/adobe/react-spectrum/pull/6968)
- Tabs
  - Add horizontal orientation to `TabsKeyboardDelegate` to prevent switching tabs with up/down arrow keys - [@mdhmaiti](https://github.com/mdhmaiti) - [PR](https://github.com/adobe/react-spectrum/pull/6023)
- Tooltip
  - Prevent Tooltip from getting stuck to screen when scrolling - [@pr7prashant](https://github.com/pr7prashant) - [PR](https://github.com/adobe/react-spectrum/pull/6984)
- Tree
  - Fix `useTreeData` error and types - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/6923)
- Misc
  - Prevent click events from being fired on the wrong target on Android devices - [@devongovett](https://github.com/devongovett) - [PR](https://github.com/adobe/react-spectrum/pull/7026)
  - Fix linking ids when using htmlFor via `useId`- [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/6788)
  - Fix conditional `useHref` call - [@abeljohn](https://github.com/abeljohn) - [PR](https://github.com/adobe/react-spectrum/pull/7032)
  - Fix type regression on `useControlledState` signature - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/6789)
  - Extract `ToggleStateProps` type to use only what is needed in `useToggleState` - [@Andarist](https://github.com/Andarist) - [PR](https://github.com/adobe/react-spectrum/pull/3836)

## Docs
- Add missing prop from Switch example in docs - [@AleksandrSI](https://github.com/AleksandrSl) - [PR](https://github.com/adobe/react-spectrum/pull/6827)
- Cleanup warnings in docs - [@reidbarber](https://github.com/reidbarber) - [PR](https://github.com/adobe/react-spectrum/pull/6857)
- Fix docs from crashing in Safari browser - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/6930)
- Clarify Icons docs - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/6955)
- Fix `useMove` docs to be more clear when events start - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/6952)
- Fix selection with falsy keys - [@reidbarber](https://github.com/reidbarber) - [PR](https://github.com/adobe/react-spectrum/pull/7079)
- Fix RAC Breadcrumbs data selector docs - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/7091)

## Under Construction

- TreeView/Tree (Beta):
  - Fix Tree row padding when chevron isn't present - [@LFDanLu](https://github.com/LFDanLu) - [PR](https://github.com/adobe/react-spectrum/pull/6545)
  - Fix TreeView so height matches the chevron height - [@LFDanLu](https://github.com/LFDanLu) - [PR](https://github.com/adobe/react-spectrum/pull/6950)
  - Add TreeView docs - [@reidbarber](https://github.com/reidbarber) - [PR](https://github.com/adobe/react-spectrum/pull/6744), [PR](https://github.com/adobe/react-spectrum/pull/6959)

- Accordion/DisclosureGroup/Disclosure (Alpha)
  - Accordion - [@reidbarber](https://github.com/reidbarber) - [PR](https://github.com/adobe/react-spectrum/pull/6931)
  - Add DisclosureGroup component to RAC - [@devongovett](https://github.com/devongovett) - [PR](https://github.com/adobe/react-spectrum/pull/7063)
  - Add basic docs for Accordion, DisclosureGroup, Disclosure - [@devongovett](https://github.com/devongovett) - [PR](https://github.com/adobe/react-spectrum/pull/7071)

### Accordion updates

We have made improvements to the Accordion component, which includes moving away from the Collection API in favor of wrapping `Disclosure` components, which can be used standalone. This includes a few breaking changes.
- `Item` has been replaced with the `Disclosure` component, which consists of two children: `DisclosureHeader` and `DisclosurePanel`
- `title` on `Item` is now a child of `DisclosureHeader`
- Children of `Item` is now children of `DisclosurePanel`
- `key` on `Item` is now `id` on `Disclosure`
- `disabledKeys` has been removed in favor of adding `isDisabled` on individual `Disclosure` components
- `allowsMultipleExpanded` can be added to allow multiple Disclosure components to be expanded at once (previously default behavior)

## Released packages

```
 - @adobe/react-spectrum@3.37.0
 - @internationalized/date@3.5.6
 - @internationalized/message@3.1.5
 - @internationalized/number@3.5.4
 - @internationalized/string-compiler@3.2.5
 - @internationalized/string@3.2.4
 - @react-aria/accordion@3.0.0-alpha.34
 - @react-aria/actiongroup@3.7.9
 - @react-aria/aria-modal-polyfill@3.7.12
 - @react-aria/autocomplete@3.0.0-alpha.34
 - @react-aria/breadcrumbs@3.5.17
 - @react-aria/button@3.10.0
 - @react-aria/calendar@3.5.12
 - @react-aria/checkbox@3.14.7
 - @react-aria/collections@3.0.0-alpha.5
 - @react-aria/color@3.0.0
 - @react-aria/combobox@3.10.4
 - @react-aria/datepicker@3.11.3
 - @react-aria/dialog@3.5.18
 - @react-aria/disclosure@3.0.0-alpha.0
 - @react-aria/dnd@3.7.3
 - @react-aria/example-theme@1.0.4
 - @react-aria/focus@3.18.3
 - @react-aria/form@3.0.9
 - @react-aria/grid@3.10.4
 - @react-aria/gridlist@3.9.4
 - @react-aria/i18n@3.12.3
 - @react-aria/interactions@3.22.3
 - @react-aria/label@3.7.12
 - @react-aria/landmark@3.0.0-beta.16
 - @react-aria/link@3.7.5
 - @react-aria/listbox@3.13.4
 - @react-aria/live-announcer@3.4.0
 - @react-aria/menu@3.15.4
 - @react-aria/meter@3.4.17
 - @react-aria/numberfield@3.11.7
 - @react-aria/optimize-locales-plugin@1.1.2
 - @react-aria/overlays@3.23.3
 - @react-aria/parcel-resolver-optimize-locales@1.1.2
 - @react-aria/progress@3.4.17
 - @react-aria/radio@3.10.8
 - @react-aria/searchfield@3.7.9
 - @react-aria/select@3.14.10
 - @react-aria/selection@3.20.0
 - @react-aria/separator@3.4.3
 - @react-aria/slider@3.7.12
 - @react-aria/spinbutton@3.6.9
 - @react-aria/ssr@3.9.6
 - @react-aria/steplist@3.0.0-alpha.10
 - @react-aria/switch@3.6.8
 - @react-aria/table@3.15.4
 - @react-aria/tabs@3.9.6
 - @react-aria/tag@3.4.6
 - @react-aria/test-utils@1.0.0-alpha.2
 - @react-aria/textfield@3.14.9
 - @react-aria/toast@3.0.0-beta.16
 - @react-aria/toggle@3.10.8
 - @react-aria/toolbar@3.0.0-beta.9
 - @react-aria/tooltip@3.7.8
 - @react-aria/tree@3.0.0-alpha.6
 - @react-aria/tree@3.0.0-beta.0
 - @react-aria/utils@3.25.3
 - @react-aria/virtualizer@4.0.3
 - @react-aria/visually-hidden@3.8.16
 - @react-spectrum/accordion@3.0.0-alpha.34
 - @react-spectrum/actionbar@3.6.0
 - @react-spectrum/actiongroup@3.10.8
 - @react-spectrum/autocomplete@3.0.0-alpha.36
 - @react-spectrum/avatar@3.0.16
 - @react-spectrum/badge@3.1.16
 - @react-spectrum/breadcrumbs@3.9.10
 - @react-spectrum/button@3.16.7
 - @react-spectrum/buttongroup@3.6.16
 - @react-spectrum/calendar@3.4.12
 - @react-spectrum/card@3.0.0-alpha.36
 - @react-spectrum/checkbox@3.9.9
 - @react-spectrum/codemods@0.2.0
 - @react-spectrum/color@3.0.0
 - @react-spectrum/combobox@3.13.3
 - @react-spectrum/contextualhelp@3.6.14
 - @react-spectrum/datepicker@3.10.2
 - @react-spectrum/dialog@3.8.14
 - @react-spectrum/divider@3.5.17
 - @react-spectrum/dnd@3.4.2
 - @react-spectrum/dropzone@3.0.4
 - @react-spectrum/filetrigger@3.0.4
 - @react-spectrum/form@3.7.9
 - @react-spectrum/icon@3.7.16
 - @react-spectrum/illustratedmessage@3.5.4
 - @react-spectrum/image@3.5.5
 - @react-spectrum/inlinealert@3.2.8
 - @react-spectrum/label@3.16.9
 - @react-spectrum/labeledvalue@3.1.17
 - @react-spectrum/layout@3.6.9
 - @react-spectrum/link@3.6.10
 - @react-spectrum/list@3.8.2
 - @react-spectrum/listbox@3.13.2
 - @react-spectrum/menu@3.20.4
 - @react-spectrum/meter@3.5.4
 - @react-spectrum/numberfield@3.9.6
 - @react-spectrum/overlays@5.6.4
 - @react-spectrum/parcel-transformer-s2-icon@0.1.1
 - @react-spectrum/picker@3.15.2
 - @react-spectrum/progress@3.7.10
 - @react-spectrum/provider@3.9.11
 - @react-spectrum/radio@3.7.9
 - @react-spectrum/s2-icon-builder@0.1.1
 - @react-spectrum/s2@0.4.0
 - @react-spectrum/searchfield@3.8.9
 - @react-spectrum/slider@3.6.12
 - @react-spectrum/statuslight@3.5.16
 - @react-spectrum/steplist@3.0.0-alpha.8
 - @react-spectrum/style-macro-s1@3.0.0-alpha.1
 - @react-spectrum/switch@3.5.8
 - @react-spectrum/table@3.14.0
 - @react-spectrum/tabs@3.8.13
 - @react-spectrum/tag@3.2.9
 - @react-spectrum/test-utils@1.0.0-alpha.2
 - @react-spectrum/text@3.5.8
 - @react-spectrum/textfield@3.12.5
 - @react-spectrum/theme-dark@3.5.13
 - @react-spectrum/theme-default@3.5.13
 - @react-spectrum/theme-express@3.0.0-alpha.15
 - @react-spectrum/theme-light@3.4.13
 - @react-spectrum/toast@3.0.0-beta.15
 - @react-spectrum/tooltip@3.6.10
 - @react-spectrum/tree@3.0.0-beta.0
 - @react-spectrum/utils@3.11.11
 - @react-spectrum/view@3.6.13
 - @react-spectrum/well@3.4.17
 - @react-stately/calendar@3.5.5
 - @react-stately/checkbox@3.6.9
 - @react-stately/collections@3.11.0
 - @react-stately/color@3.8.0
 - @react-stately/combobox@3.10.0
 - @react-stately/data@3.11.7
 - @react-stately/datepicker@3.10.3
 - @react-stately/disclosure@3.0.0-alpha.0
 - @react-stately/dnd@3.4.3
 - @react-stately/flags@3.0.4
 - @react-stately/form@3.0.6
 - @react-stately/grid@3.9.3
 - @react-stately/layout@4.0.3
 - @react-stately/list@3.11.0
 - @react-stately/menu@3.8.3
 - @react-stately/numberfield@3.9.7
 - @react-stately/overlays@3.6.11
 - @react-stately/radio@3.10.8
 - @react-stately/searchfield@3.5.7
 - @react-stately/select@3.6.8
 - @react-stately/selection@3.17.0
 - @react-stately/slider@3.5.8
 - @react-stately/steplist@3.0.0-alpha.9
 - @react-stately/table@3.12.3
 - @react-stately/tabs@3.6.10
 - @react-stately/toast@3.0.0-beta.6
 - @react-stately/toggle@3.7.8
 - @react-stately/tooltip@3.4.13
 - @react-stately/tree@3.8.5
 - @react-stately/utils@3.10.4
 - @react-stately/virtualizer@4.1.0
 - @react-types/accordion@3.0.0-alpha.24
 - @react-types/actionbar@3.1.10
 - @react-types/actiongroup@3.4.12
 - @react-types/autocomplete@3.0.0-alpha.26
 - @react-types/avatar@3.0.10
 - @react-types/badge@3.1.12
 - @react-types/breadcrumbs@3.7.8
 - @react-types/button@3.10.0
 - @react-types/buttongroup@3.3.12
 - @react-types/calendar@3.4.10
 - @react-types/card@3.0.0-alpha.30
 - @react-types/checkbox@3.8.4
 - @react-types/color@3.0.0
 - @react-types/combobox@3.13.0
 - @react-types/contextualhelp@3.2.13
 - @react-types/datepicker@3.8.3
 - @react-types/dialog@3.5.13
 - @react-types/divider@3.3.12
 - @react-types/form@3.7.7
 - @react-types/grid@3.2.9
 - @react-types/illustratedmessage@3.3.12
 - @react-types/image@3.4.4
 - @react-types/label@3.9.6
 - @react-types/layout@3.3.18
 - @react-types/link@3.5.8
 - @react-types/list@3.2.20
 - @react-types/listbox@3.5.2
 - @react-types/menu@3.9.12
 - @react-types/meter@3.4.4
 - @react-types/numberfield@3.8.6
 - @react-types/overlays@3.8.10
 - @react-types/progress@3.5.7
 - @react-types/provider@3.8.4
 - @react-types/radio@3.8.4
 - @react-types/searchfield@3.5.9
 - @react-types/select@3.9.7
 - @react-types/shared@3.25.0
 - @react-types/slider@3.7.6
 - @react-types/statuslight@3.3.12
 - @react-types/switch@3.5.6
 - @react-types/table@3.10.2
 - @react-types/tabs@3.3.10
 - @react-types/text@3.3.12
 - @react-types/textfield@3.9.7
 - @react-types/tooltip@3.4.12
 - @react-types/view@3.4.12
 - @react-types/well@3.3.12
 - @spectrum-icons/color@3.5.16
 - @spectrum-icons/express@3.0.0-alpha.20
 - @spectrum-icons/illustrations@3.6.16
 - @spectrum-icons/ui@3.6.10
 - @spectrum-icons/workflow@4.2.15
 - react-aria-components@1.4.0
 - react-aria@3.35.0
 - react-stately@3.33.0
 - tailwindcss-react-aria-components@1.1.6
```
